// .block{
//     width: 100px;
//     &-element{
//         background-color: red;
//         &__modifier{
//             color: blue;
//         }
//     }
//     &-isChecked{
//         display: flex;
//     }
// }
//
// .block{
//     width: 100px;
//     @at-root #{&}-element{
//         background-color: red;
//         @at-root #{&}__modifier{
//             color: blue;
//         }
//     }
//     @at-root #{&}-isChecked{
//         display: flex;
//     }
// }

/**
@at-root(without:...)和@at-root(with:...)的使用
默认@at-root只会跳出选择器嵌套，而不能跳出@media或@supports，如果要跳出这两种，则需要使用@at-root(without:media),@at-root(without:support)
    - 1. all（表示所有）
    - 2. rule (表示常规css)
    - 3. media (表示media)
    - 4. supports (表示supports)
*/
@media screen {
    .parent {
        width: 100px;
        //跳出media
        @at-root (without: media) {
            .child {
                width: 80px;
            }
        }
    }
}